<template>
    <div>
        <button @click="changearr">修改数组</button>
        <button @click="changeobj">修改对象</button>
        <h4>数组</h4>
        数组的元素是:{{ arr }}:数组长度:{{ arr.length }}
        <h4>对象hotfix</h4>
        <ul>
            <li v-for="(item, index) in obj" :key="index">
                {{ item }}:{{ obj[item] }}
            </li>
        </ul>
    </div>
</template>

<script>
let arr1 = [1, 2, 3, 4];
export default {
    components: {},
    props: {},
    data() {
        return {
            arr: [2, 6, 5, 8, 3],
            obj: {
                name: '黄飞扬',
                age: 20,
                sex: '男',
                friend: [{ name: '黄李帅' }]
            }
        };
    },
    computed: {},
    methods: {
        changearr() {
            // this.arr[10] = 10;
            this.arr.push();
            // 第一个参数 数组/对象, 下标/key, 新值
            // this.$set(this.arr, 10, 100);
        },
        changeobj() {
            this.$set(this.obj, 'address', '湖北');

            // this.obj.address = '湖北';
        }
    },
    created() {
        console.log(arr1);
        console.log(this.arr);
    },
    mounted() {}
};
</script>
<style scoped>
h4 {
    color: blueviolet;
}
</style>
